.#{$ant-pre}checkbox {
  display: inline-block;
  cursor: pointer;
  .inner {
    display: inline-block;
    vertical-align: text-bottom;
    position: relative;
    top: 0;
    left: 0;
    width: 16px;
    height: 16px;
    direction: ltr;
    background-color: $white-color;
    border: 1px solid $border-color;
    border-radius: 2px;
    border-collapse: initial;
    &:after {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 4px;
      height: 8px;
      margin-left: -2px;
      margin-top: -5px;
      border: 2px solid $white-color;
      border-top: 0;
      border-left: 0;
      content: " ";
      opacity: 0;
      box-sizing: border-box;
      transition: all .2s ease-in-out;
    }
  }
  .content {
    display: inline-block;
  }
  &.half-checked {
    .inner:after {
      top: 50%;
      left: 50%;
      width: 10px;
      height: 10px;
      background-color: $primary-color;
      border: none;
      margin: 0;
      transform: translate(-50%,-50%);
      opacity: 1;
      content: " ";
    }
  }
  &.checked {
    .inner {
      border-color: $primary-color;
      background-color: $primary-color;
      &:after {
        transform: rotate(45deg);
        opacity: 1;
      }
    }
  }
  &.disabled {
    color: $disable-color;
    cursor: not-allowed;
    .inner {
      border-color: $disable-color;
      background-color: $disable-color;
      &:after {
        background-color: $disable-color;
      }
    }
  }
}
